<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册-北大青鸟用户注册</title>
		<link rel="stylesheet" type="text/css" href="css/北大青鸟.css"/>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#email").blur(checkEmail);
				function checkEmail(){
					if($("#email").val().length<1){
						$("#email").next().html("邮箱不能为空").css("color","red");
						return false;
					}
					var regEmail=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
					if(!regEmail.test($("#email").val())){
						$("#email").next().html("邮箱格式错误").css("color","red");
						return false;
					}
					$("#email").next().html("√").css("color","green");
					return true;
				};
				$("#name").blur(checkName);
				function checkName(){
					if($("#name").val().length<1){
						$("#name").next().html("昵称不能为空").css("color","red");
						return false;
					}
					$("#name").next().html("√").css("color","green");
					return true;
				};
				$("#pw1").blur(checkPw1);
				function checkPw1(){
					var regPW=/^[\w]{6,16}$/
					if($("#pw1").val().length<1){
						$("#pw1").next().html("密码不能为空").css("color","red");
						return false;
					}
					if(!regPW.test($("#pw1").val())){
						$("#pw1").next().html("密码格式错误").css("color","red");
						return false;
					}
					$("#pw1").next().html("√").css("color","green");
					return true;
				};
				$("#pw1").blur(checkPw2);
				function checkPw2(){
					if($("#pw2").val().length<1){
						$("#pw2").next().html("密码不能为空").css("color","red");
						return false;
					}
					if($("#pw2").val()!=$("#pw1").val()){
						$("#pw2").next().html("2次密码要相同").css("color","red");
						return false;
					}
					$("#pw2").next().html("√").css("color","green");
					return true;
				};
				$("#verCode").blur(checkCode);
				function checkCode(){
					if($("#verCode").val().length<1||$("#verCode").val().length>4){
						$("#verCode").next().next().html("验证码错误").css("color","red");
						return false;
					}
					$("#verCode").next().next().html("√").css("color","green");
					return true;
				};
				$("#register").submit(function(){
					var check=checkEmail()&checkName()&checkPw1()&checkPw2()&checkCode();
					if($("#agree").prop("checked")){
						if(check>0){
							return true;
						}
					}
					return false;
				});
			})
		</script>
	</head>
	<body>
		<div id="box">
			<div id="regChoice">
				<p>邮箱注册</p>
			</div>
			<form id="register" action="http://www.baidu.com">
				<ul>
				<li>
					<input type="email" name="email" id="email" value="" placeholder="请输入您的常用邮箱"/>
					<span>请输入您的常用邮箱</span>
				</li>
				<li>
					<input type="text" name="name" id="name" value="" placeholder="请输入昵称"/>
					<span>4-12位字符、英文、数字、或者中文均可</span>
				</li>
				<li>
					<input type="password" name="pw1" id="pw1" value="" placeholder="请输入密码"/>
					<span>6-16位字符或数字、字母区分大小写</span>
				</li>
				<li>
					<input type="password" name="pw2" id="pw2" value="" placeholder="请再次输入密码"/>
					<span></span>
				</li>
				<li>
					<input type="text" name="verCode" id="verCode" value="" placeholder="请输入右侧验证码"/>
					<span><img src="img/59a11fa7365d1.png"/></span>
					<span></span>
				</li>
				<li>
					<input type="checkbox" name="agree" id="agree" value="" />
					<span id="agreeText" style="font-size: 14px;">同意 <a href="#">用户服务条款</a></span>
				</li>
				<li>
					<input type="submit" id="reg" name="" value="注册"/>
				</li>
				</ul>
			</form>
			<div id="load">
				<p>已有账号，马上登陆</p>
			</div>
		</div>
	</body>
</html>
